import React, { memo, useState } from 'react';
import { BaseEdge, EdgeLabelRenderer, getBezierPath, useReactFlow } from '@xyflow/react';
import { CloseOutlined } from '@ant-design/icons';
import './style.less'

export const RemovableEdge = memo((props) => {
  const [path, labelX, labelY] = getBezierPath(props);
  const [isHovered, setIsHovered] = useState(false); // 状态控制
  const { deleteElements } = useReactFlow()
  const handleDelete = () => {
    deleteElements({ edges: [{ ...props }] })
  }
  return (
    <g onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <BaseEdge path={path} markerEnd={props.markerEnd} className="custom-edge">
        <EdgeLabelRenderer>
          <div className='edge-label'
            data-id={props.id}
            style={{
              visibility: isHovered ? 'visible' : 'hidden',
              position: 'absolute',
              transform: `translate(-50%,-50%) translate(${labelX}px, ${labelY}px)`,
              pointerEvents: 'all'
            }}
            onClick={handleDelete}
          >
            <span className='label-icon'>
              <CloseOutlined />
            </span>
          </div>
        </EdgeLabelRenderer>
      </BaseEdge>
    </g>
  );
})

export const EdgeTypes = Object.freeze({
  RemovableEdge
})